<template>
	<view v-if="!loading" class="com-complete">
		<block v-if="status">
			<view class="icon-success">
				<image src="@/static/union.png" mode="widthFix"></image>
			</view>
			<view class="title">代理商申请提交成功</view>
			<view class="hint">
				<view class="">审核时间为1-15个工作日</view>
				<view class="">请保持您的电话畅通</view>
			</view>
		</block>
		<block v-else>
			<view class="icon-success">
				<image src="@/static/fail.png" mode="widthFix"></image>
			</view>
			<view class="title">代理商申请提交支付失败</view>
			<view class="hint">
				<block v-if="!isExpire">
					<view class="">您未完成订金的支付</view>
					<view class="">请在{{ orderInfo.expiration_time }}前完成支付</view>
				</block>
				<view v-else class="">订单已失效，请重新提交申请单</view>
				
				<!-- <view class="font-size-28 padding-t8">倒计时：{{minute}}分{{second}}秒</view> -->
			</view>
			<view class="" style="margin-top: 138rpx;">
				<button v-if="!isExpire" class="confirm-btn flex-1" @click="handlePay">继续支付</button>
				<button class="cancel-btn flex-1 margin-t32" @click="handleChangeOrder">重新申请</button>
				<!-- <button class="cancel margin-t32" @click="handleBank">查看详情</button> -->
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		props: {
			orderId: {
				type: String,
				default: ''
			},
			from: {
				type: String,
				default: ''
			},
			payStatus: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				unpaid_fee: 0,
				hour: 0,
				minute: 0,
				second: 0,
				
				loading: true,
				orderInfo: {},
				isExpire: false,	// 是否过期
				status: true
			}
		},
		watch: {
			payStatus() {
				this.status = this.payStatus
			}
		},
		mounted() {
			this.status = this.payStatus
			this.getOrderInfo(this.orderId)
		},
		methods: {
			// 获取订单信息
			getOrderInfo(gid) {
				return new Promise((resolve, rejects)=> {
					this.$api.agentOrderDetailsApi(gid).then(res=> {
						this.unpaid_fee = res.data.unpaid_fee
						this.orderInfo = res.data
						const targetDate = this.$dayjs(res.data.expiration_time);
						// 当前时间
						const now = this.$dayjs();
						// 判断目标时间是否在当前时间之后
						if (targetDate.isAfter(now)) {
							this.isExpire = false
						} else {
							this.isExpire = true
						}
						resolve()
					}).catch(err=> {
						rejects()
						console.log('err', err);
					}).finally(()=> {
						this.loading = false
					})
				})
			},
			// 获取订单信息
			// getOrderInfo(gid) {
			// 	this.$api.agentOrderDetailsApi(gid).then(res=> {
			// 		this.agentPayCreate(gid, res.data.unpaid_fee)
			// 	}).catch(err=> {
			// 		console.log();
			// 	})
			// },
			// 查看订单详情
			handleBank() {
				// if (this.from === 'baseInfo') {
				// 	uni.navigateBack() // 返回
				// } else {
					// 进入到审核详情
					uni.redirectTo({
						url: '/pages/agent/base-info/base-info'
						// url: '/pages/agent/procure/order-info/order-info?orderId='+this.orderId
					})
				// }
			},
			// 取消申请（重新申请）
			handleChangeOrder() {
				const params = {
					gid: this.orderId, 
					is_cart: 1
				}
				this.$api.agentCancelApplyApi().then(res=> {
					this.$emit('reset')
				}).catch(err=> {
					console.log('err', err);
				})
			},
			async handlePay() {
				const { code } = await uni.login()
				await this.getOrderInfo(this.orderId)
				const params = {
					appid: this.$store.state.common.appid, // string 必需 微信小程序appid
					order_gid: this.orderId, // string 订单gid 必需 示例值: 71e3f23b-b20d-4877-b32a-b2fd23a7ddc8
					code: code, // string  必需 wx.login中的code
					order_price: this.unpaid_fee, // number 订单支付金额 必需 示例值: 1332
				}
				this.$api.agentPayCreateApi(params).then(res=> {
					uni.showLoading({
						title: '支付中···'
					})
					uni.requestPayment({
					    provider: "wxpay",
					    orderInfo: {},
						...res.data,
					    success: (res)=> {
							this.status = true
							uni.hideLoading()
							uni.showToast({
								icon: 'none',
								title: '支付成功'
							})
						},
					    fail: (err)=> {
							uni.hideLoading()
							uni.showToast({
								icon: 'none',
								title: '支付失败'
							})
							this.status = false
						}
					})
				}).catch(err=> {
					console.log('err', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.com-complete {
		padding-top: 226rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		
		.icon-success {
			width: 140rpx;
			height: 140rpx;
			
			image {
				width: 100%;
			}
		}
		
		.title {
			padding-top: 34rpx;

			font-size: 40rpx;
			font-weight: 600;
			line-height: 48rpx;
			text-align: center;
			color: rgba(0, 0, 0, 0.9);
		}
		
		.hint {
			padding-top: 48rpx;
			font-size: 34rpx;
			font-weight: 400;
			line-height: 46rpx;
			text-align: center;
			color: rgba(0, 0, 0, 0.9);
		}
		
		.confirm {
			width: 524rpx;
			height: 82rpx;
			margin-top: 32rpx;
			border: 1px solid var(--gradient-color-vertical);
			background: var(--gradient-color-vertical);
		
			font-size: 34rpx;
			font-weight: 400;
			line-height: 82rpx;
			text-align: center;
			color: #FFFFFF;
		}
		.cancel {
			width: 524rpx;
		}
	}
</style>